<template>
  <div class="hotcate">
    <div>热门分类</div>
    <van-grid 
      :gutter="0" 
      icon-size="60"
      :border="false"
    >
      <van-grid-item 
        v-for="li in list" 
        :key="li.title" 
        :icon="li.img" 
        :text="li.title"
        @click="handleClick"
      />
    </van-grid>
  </div>
</template>

<script>
import axios from 'axios'
import { onMounted, ref, watchEffect, computed } from 'vue'
import { Grid, GridItem } from 'vant'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  // props: ['list'],
  
  components: {
    'van-grid': Grid,
    'van-grid-item': GridItem
  },

  setup(props) {
    // const list = ref([])
    const router = useRouter()
    const store = useStore()

    onMounted(() => {
      // axios.get('/api/hotcate')
      //   .then(result => {
      //     list.value = result.data
      //   })
    })

    // watchEffect(() => {
    //   list.value = props.list
    // })

    const handleClick = () => {
      router.push('/list')
    }

    return {
      list: computed(() => store.state.category),
      handleClick
    }
  }
}
</script>

<style lang='stylus' scoped>
.hotcate
  background #fff
  > div
    padding .1rem 0 0 .15rem
</style>

<style lang="stylus">
.van-grid-item__content
  padding 0
  img
    border-radius .06rem
</style>